<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Dijit Buttons</title>
		<link rel="stylesheet" href="css/demo.css" media="screen">
		<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<h1>Demo: dijit/form/Button</h1>
		<p>
			Below, we see <code>dijit/form/Button</code> in two forms: as a standard button, and
			using an icon with no label.  Be sure to open the console to see messages when clicking
			the buttons!
		</p>
		<div>
			<button id="btn"></button>
			<button id="btn2"></button>
		</div>
		<div id="container"> 
	
		</div>
		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			var dojoConfig = {
				async: true,
				dojoBlankHtmlUrl: location.pathname.replace(/\/[^/]+$/, "") + "/blank.html",
				packages: [{
					name: "my",
					location: location.pathname.replace(/\/[^/]+$/, "") + "/js/my" 
				}]
			};
			
			require(["dijit/form/Button", "my/MyButton", "dojo/domReady!"], function(Button, MyButton) {
				var button = new Button({
					label: "Click Me!",
					onClick: function(){ console.log("First button was clicked!"); }
				}, "btn");
				button.startup();

				var button2 = new Button({
					iconClass:"dijitIconNewTask",
					showLabel:false,
					label: "Click Me!", // analogous to title when showLabel is false
					onClick: function(){ console.log("Second button was clicked!"); }
				}, "btn2");
				
				button2.startup();
				
				var myBtn = new MyButton();
				myBtn.placeAt(container);
				
				var lastButton = new Button({
					label: "Last Button!",
					onClick: function(){ alert("Last Button was clicked!"); }
				});
				
				lastButton.placeAt(container);
			});
			
		</script>
	</body>
</html>